<nz-layout>
  <nz-header>
    <div class="logo">后台任务调度</div>
    <ul nz-menu nzTheme="dark" nzMode="horizontal" style="float: right">
      <li nz-menu-item [nzSelected]="true">后台任务</li>
      <li nz-menu-item (click)="SshServer()">SSh服务器</li>
      <li nz-menu-item (click)="loginout()">安全退出</li>
    </ul>
  </nz-header>
  <nz-content>
    <div class="inner-content">
      <div nz-row>
        <div nz-col nzSpan="8"> 后台任务列表</div>
        <div nz-col nzSpan="16" style="    text-align: right;">
          <nz-space>

            <button nz-button nzType="primary" (click)="newTask()" *nzSpaceItem><i nz-icon
                nzType="plus"></i>新建任务</button>


            <button nz-button nzType="primary" (click)="pauseTask()" *nzSpaceItem
              style=" border-color: #19be6b;background-color: #19be6b;"><i nz-icon nzType="stop"
                nzTheme="outline"></i>暂停任务</button>

            <button nz-button nzType="primary" (click)="startTask()" *nzSpaceItem
              style=" border-color:#f90;background-color: #f90;"><i nz-icon nzType="play-circle"
                nzTheme="outline"></i>开启任务</button>

            <button nz-button nzType="primary" (click)="execteTask()" *nzSpaceItem
              style=" border-color: #2d8cf0;background-color: #2d8cf0;"><i nz-icon nzType="caret-right"
                nzTheme="outline"></i>立即执行</button>

            <button nz-button nzType="primary" (click)="update()" *nzSpaceItem
              style=" border-color: #ed4014;background-color: #ed4014;"><i nz-icon nzType="tool"
                nzTheme="outline"></i>修改任务</button>

            <button nz-button nzType="default" (click)="deleteOne()" *nzSpaceItem><i nz-icon nzType="close"
                nzTheme="outline"></i>删除任务</button>

            <button nz-button nzType="primary" style=" border-color: #2db7f5;background-color: #2db7f5;"
              (click)="searchData()" *nzSpaceItem><i nz-icon nzType="redo" nzTheme="outline"></i>刷新数据</button>

          </nz-space>
        </div>
      </div>
      <div nz-row style="margin-top: 20px;">
        <div nz-col nzSpan="24">
          <nz-table #Task nzBordered nzShowPagination nzShowSizeChanger [nzData]="listOfCurrentPageData"
            [nzFrontPagination]="false" [nzTotal]="total" [(nzPageIndex)]="pageindex" [(nzPageSize)]="pagesize"
            [nzLoading]="tableloading" (nzPageIndexChange)="searchData()">
            <thead>
              <tr>
                <th [(nzChecked)]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)">
                </th>
                <th>作业名称</th>
                <th>分组</th>
                <th>最后执行时间</th>
                <th>间隔(Cron)</th>
                <th>状态</th>
                <th>描述</th>
                <th>ApiUrl</th>
                <th>请求方式</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of Task.data">
                <td [nzChecked]="setOfCheckedId.has(item.ID)" (nzCheckedChange)="onItemChecked(item.ID, $event)"></td>
                <td>{{item.TaskName}}</td>
                <td>{{item.GroupName}}</td>
                <td>{{item.LastRunTime}}</td>
                <td>{{item.Interval}}</td>
                <td>
                  <div [ngSwitch]="item.Status">
                    <div *ngSwitchCase="0">
                      <nz-tag [nzColor]="'#0acb0a'">正常</nz-tag>
                    </div>
                    <div *ngSwitchCase="1">
                      <nz-tag [nzColor]="'#ed4014'">暂停</nz-tag>
                    </div>
                    <div *ngSwitchCase="2">
                      <nz-tag [nzColor]="'#fc2f2f'">完成</nz-tag>
                    </div>
                    <div *ngSwitchCase="3">
                      <nz-tag [nzColor]="'#607D8B'">异常</nz-tag>
                    </div>
                    <div *ngSwitchCase="4">
                      <nz-tag [nzColor]="'#607D8B'">阻塞</nz-tag>
                    </div>
                    <div *ngSwitchCase="5">
                      <nz-tag [nzColor]="'#607D8B'">停止</nz-tag>
                    </div>
                    <div *ngSwitchDefault>
                      <nz-tag [nzColor]="'#f90'">不存在</nz-tag>
                    </div>
                  </div>
                </td>
                <td>{{item.Describe}}</td>
                <td>{{item.ApiUrl}}</td>
                <td>{{item.RequestType}}</td>
                <td> <button nz-button nzType="default" (click)="hisTask(item)">执行记录</button></td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </div>
  </nz-content>
  <nz-footer>@2022</nz-footer>
</nz-layout>
<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }" [nzWidth]="720"
  [nzVisible]="visible" [nzMaskClosable]="true" nzTitle="任务信息" (nzOnClose)="close()">
  <ng-container *nzDrawerContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>作业名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [(ngModel)]="item.TaskName" name="TaskName" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>分组</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [(ngModel)]="item.GroupName" name="GroupName" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>间隔(Cron)</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [(ngModel)]="item.Interval" name="Interval" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>cron在线生成</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <a href="http://cron.qqe2.com/" target="_blank">cron在线生成</a>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>方式</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select [(ngModel)]="item.RequestType" name="method" (ngModelChange)="MethodChange($event)">
            <nz-option nzValue="post" nzLabel="post"></nz-option>
            <nz-option nzValue="get" nzLabel="get"></nz-option>
            <nz-option nzValue="shell" nzLabel="shell"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="urlmehtod">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>ApiUrl</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [(ngModel)]="item.ApiUrl" name="ApiUrl" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="urlmehtod">
        <nz-form-label [nzSm]="6" [nzXs]="24">header(key)：</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [(ngModel)]="item.AuthKey" name="AuthKey" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="urlmehtod">
        <nz-form-label [nzSm]="6" [nzXs]="24">header(value)：</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [(ngModel)]="item.AuthValue" name="AuthValue" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!urlmehtod">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>SshServer</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select [(ngModel)]="item.SshServerID" name="SshServerID">
            <nz-option *ngFor="let op of sshoptionlist" [nzValue]="op.value" [nzLabel]="op.label"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!urlmehtod">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>shell：</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea nz-input rows="5" [(ngModel)]="item.shell" name="shell">
        </textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea nz-input [(ngModel)]="item.Describe" name="Describe"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
    <nz-divider></nz-divider>
    <button nz-button nzType="primary" (click)="AddOrEditTask()">提交</button>
  </ng-container>
</nz-drawer>
<!-- 加载样式 -->
<div *ngIf="loading" style="position: fixed; top: 0;left: 0;width: 100%; height: 100%; z-index: 9999;display: block; ">

  <div class="spiner-example" style="padding-top: 30%;">
    <div class="sk-spinner sk-spinner-three-bounce">
      <div class="sk-bounce1"></div>
      <div class="sk-bounce2"></div>
      <div class="sk-bounce3"></div>
    </div>
  </div>

</div>

<nz-modal [(nzVisible)]="isModelVisible" nzTitle="执行记录" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>

    <nz-table #TaskLog nzBordered nzShowPagination nzShowSizeChanger [nzData]="logcurrentdata"
      [nzFrontPagination]="false" [nzTotal]="logtotal" [(nzPageIndex)]="logpageindex" [(nzPageSize)]="logpagesize"
      [nzLoading]="logtableloading" (nzPageIndexChange)="logsearchData()">


      <thead>
        <tr>
          <th>执行开始时间</th>
          <th>执行结束时间</th>
          <th>信息</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of TaskLog.data">
          <td>{{item.BeginDate}}</td>
          <td>{{item.EndDate}}</td>
          <td><button nz-button nz-popover nzPopoverContent="{{item.Msg}}" nzPopoverTrigger="click">
              <p style="text-overflow:ellipsis;width: 13em;    white-space: nowrap;overflow: hidden;">{{item.Msg}}</p>
            </button></td>
        </tr>
      </tbody>
    </nz-table>
  </ng-container>
</nz-modal>
<ng-template #contentTemplate>
  <div>
    <p>Content</p>
    <p>Content</p>
  </div>
</ng-template>